<template>
  <div class="home">
    <div id="a">这是一个元素</div>
  </div>
</template>

<script>
import {onBeforeMount, onMounted, nextTick } from 'vue'
export default {
  name: 'Home',
  setup(props) { // setup函数是组合api的入口 他执行在beforeCreate()之前
    // console.log(this);
    
    // onBeforeMount(() => {
    //   console.log('这时页面渲染之前');
    //   // let el = document.getElementById('a')
    //   // console.log(el);
    // }) 
    // onMounted(() => {
    //   console.log('这时页面渲染完成');
    //   //  let el = document.getElementById('a')
    //   // console.log(el);
    // })
    // nextTick(() => { // 当dom更新或者打补丁完成后立即执行的一个函数
    //   let el = document.getElementById('a')
    //   console.log(el);
    // })
    
  },
}
</script>

